h1{
  padding-top:200px;
  text-align:center;
}

@-webkit-keyframes orbit { 
	from { 
		-webkit-transform:rotate(0deg);
	} 
	to { 
		-webkit-transform:rotate(360deg);
	} 
}

#solar-system li{
  position:absolute;
}
li{
 
 color:white;
}
#sun{
  top:500px;
  left:500px;
  width:100px;
  height:100px;
  background:yellow;
  -webkit-border-radius:300px;
  -moz-border-radius:300px;
  border:1px solid orange;
  
}

#mercury-orbit{
  top:450px;
  left:450px;
  width:200px;
  height:200px;

  border: 1px solid yellow;
  -webkit-border-radius:900px;
  -moz-border-radius:500px;
  
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:linear;
  -webkit-animation-name:orbit;
  -webkit-animation-duration: 5s;
}

#mercury{
  width:10px;
  height:10px;
  -webkit-border-radius:50px;
  -moz-border-radius:50px;
  background:red;
  margin-left:28px;
}

#venus-orbit{
  top:400px;
  left:400px;
  width:300px;
  height:300px;

  border: 1px solid yellow;
  -webkit-border-radius:500px;
  -moz-border-radius:500px;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:linear;
  -webkit-animation-name:orbit;
  -webkit-animation-duration: 20s;
}
#venus{
  width:10px;
  height:10px;
  -webkit-border-radius:50px;
  -moz-border-radius:50px;
  background:orange;
  margin-left:60px;
}

#mars-orbit{
  top:350px;
  left:350px;
  width:400px;
  height:400px;

  border: 1px solid yellow;
  -webkit-border-radius:500px;
  -moz-border-radius:500px;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:linear;
  -webkit-animation-name:orbit;
  -webkit-animation-duration: 15s;
}
#mars{
  width:10px;
  height:10px;
  -webkit-border-radius:50px;
  -moz-border-radius:50px;
  background:red;
  margin-left:100px;
}

